import { loginGetAuthCode } from '@/api/login'
import { login } from '@/store/actions/login'
import { LoginValues } from '@/types/data'
import { Button, NavBar, Form, Input, List, Toast } from 'antd-mobile'
import { InputRef } from 'antd-mobile/es/components/input'
import { AxiosError } from 'axios'
import { useRef } from 'react'
// import { AxiosError } from 'axios'
import { useDispatch } from 'react-redux'
import { useHistory } from 'react-router-dom'
import { useCountDown } from '@/hooks/useCountDown'
import styles from './index.module.scss'

const Login = () => {
  const histroy = useHistory()
  const dispatch = useDispatch()
  const { start, countText, flog } = useCountDown()
  const onFinish = async (values: LoginValues) => {
    try {
      // console.log(values)
      await dispatch(login(values))
      Toast.show({
        icon: 'success',
        content: '登录成功'
      })
      histroy.replace('/')
    } catch (error) {
      const e = error as AxiosError<{ message: string }>
      // console.dir(e.response)
      const content = e.response?.data.message || '请求超时'
      Toast.show({
        icon: 'fail',
        content
      })
    }
  }
  const [form] = Form.useForm()
  const mobileRef = useRef<InputRef>(null)
  // 发送验证码
  const extraHandler = async () => {
    // console.log(111)
    // 拿到手机号
    const mobile = form.getFieldValue('mobile')
    // 手动校验
    form.validateFields(['mobile'])
    // 判断手机号校验是否成功
    const hasError = form.getFieldError('mobile').length > 0
    // 手动聚焦
    if (!mobile || hasError) return mobileRef.current?.focus()
    try {
      // 开启定时器
      start(60)
      // 发请求
      await loginGetAuthCode(mobile)
      Toast.show({
        icon: 'success',
        content: '发送成功'
      })
    } catch (error) {
      const e = error as AxiosError<{ message: string }>
      // console.dir(e.response)
      const content = e.response?.data.message || '请求超时'
      Toast.show({
        icon: 'fail',
        content
      })
    }
  }
  return (
    <div className={styles.root}>
      <NavBar></NavBar>

      <div className="login-form">
        <h2 className="title">账号登录</h2>
{/* initialValues={{ mobile: '13911111111', code: '246810' }} */}
        <Form form={form} onFinish={onFinish} initialValues={{ mobile: '13911111111', code: '246810' }} >
          <Form.Item
            className="login-item"
            name="mobile"
            rules={[
              { required: true, message: '请输入手机号' },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '手机号格式错误'
              }
            ]}
          >
            <Input ref={mobileRef} placeholder="请输入手机号" />
          </Form.Item>
          <List.Item
            className="login-code-extra"
            extra={<span onClick={flog ? extraHandler : () => {}} className="code-extra">{countText}</span>}
          >
            <Form.Item
              name="code"
              className="login-item"
              rules={[{ required: true, message: '请输入验证码' }]}
            >
              <Input placeholder="请输入验证码" autoComplete="off" />
            </Form.Item>
          </List.Item>

          <Form.Item noStyle>
            <Button
              block
              type="submit"
              color="primary"
              className="login-submit"
            >
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
export default Login
